<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="1250px">
    <canvas id="myCanvas" width="1200" height="565.6"></canvas>
  </el-dialog>
</template>

<script>
export default {
  name: 'labelhistory',
  data() {
    return {
      dataForm: {
        key: ''
      },
      datajson: [],
      dataList: [],
      dataX: [],
      dataY: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      Visiable: false,
      dialogVisible: false
    }
  },
  mounted() {
    // 使用定时器更新轨迹位置
    // setInterval(() => {
    //   this.dataX.x += 1;
    //   this.positionY += 1;
    //   this.drawTrack();
    // }, 1000 / 60); // 60帧每秒更新
  },
  methods: {
    init(eid) {
      this.dialogVisible = true;
      console.log('子组件employeeId为' + eid)
      this.dataForm.key = eid;
      this.$http({
        url: this.$http.adornUrl('/labelhistory/labelhistoryinfo/list'),
        method: 'get',
        async: false,
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'key': this.dataForm.key
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.datajson = data.page.records
          console.log(this.datajson)
        } else {
          this.datajson = []
        }
        this.drawTrack();
      })
    },
    drawTrack() {
      var posx = this.datajson.map(item => {
        const x = item.labelPosX;
        const y = item.labelPosY;
        return { x, y }
      })
      console.log(posx)
      var posy = this.datajson.map(item => {
        return item.labelPosY;
      })
      this.dataY = posy;

      var c = document.getElementById('myCanvas');
      const img = new Image();
      const ctx = c.getContext('2d');

      img.src = 'static/images/3.jpg';

      img.onload = function () {
        const cWidth = c.width;
        const cHeight = c.height;
        const imgWidth = img.naturalWidth;
        const imgHeight = img.naturalHeight;
        const zoom = {
          width: cWidth / imgWidth,
          height: cHeight / imgHeight
        };

        ctx.drawImage(img, 0, 0, cWidth, cHeight);

        for (var i = 0; i < posx.length; i++) {
          ctx.fillStyle = '#00FF00';
          ctx.beginPath();
          ctx.arc(posx[i].x * zoom.width, posx[i].y * zoom.height, 10, 0, 2 * Math.PI);
          ctx.fill();
        }

        for (var i = 0; i < posx.length - 1; i++) {
          ctx.beginPath();
          ctx.lineWidth = 10;
          ctx.strokeStyle = '#00FF00';
          ctx.moveTo(posx[i].x * zoom.width, posx[i].y * zoom.height);
          ctx.lineTo(posx[i + 1].x * zoom.width, posx[i + 1].y * zoom.height);
          ctx.stroke();
          ctx.closePath();
        }
      }
      this.dataListLoading = false
    }
  }
}
</script>

<style scoped>

</style>
<!--<template>-->
<!--  <div class="mod-config">-->
<!--    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">-->
<!--      <el-form-item>-->
<!--        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button @click="getDataList()">查询</el-button>-->
<!--        <el-button v-if="isAuth('tbposition:tbposition:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
<!--        <el-button v-if="isAuth('tbposition:tbposition:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    <el-table-->
<!--      :data="dataList"-->
<!--      border-->
<!--      ref="singleTable"-->
<!--      highlight-current-row-->
<!--      @current-change="handleCurrentChange"-->
<!--      :row-class-name="tableRowClassName"-->
<!--      :header-cell-style="{background:'#17b3a3',color:'#FFFFFF'}"-->
<!--      v-loading="dataListLoading"-->
<!--      @selection-change="selectionChangeHandle"-->
<!--      style="width: 100%;">-->
<!--      <el-table-column-->
<!--        type="selection"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        width="50">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="position"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="工种">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="posNum"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="人数">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        fixed="right"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        width="150"-->
<!--        label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.position)">修改</el-button>-->
<!--          <el-button type="text" size="small" @click="deleteHandle(scope.row.position)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--    <el-pagination-->
<!--      @size-change="sizeChangeHandle"-->
<!--      @current-change="currentChangeHandle"-->
<!--      :current-page="pageIndex"-->
<!--      :page-sizes="[10, 20, 50, 100]"-->
<!--      :page-size="pageSize"-->
<!--      :total="totalPage"-->
<!--      layout="total, sizes, prev, pager, next, jumper">-->
<!--    </el-pagination>-->
<!--    &lt;!&ndash; 弹窗, 新增 / 修改 &ndash;&gt;-->
<!--    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  import AddOrUpdate from './tbposition-add-or-update'-->
<!--  export default {-->
<!--    data () {-->
<!--      return {-->
<!--        dataForm: {-->
<!--          key: ''-->
<!--        },-->
<!--        dataList: [],-->
<!--        pageIndex: 1,-->
<!--        pageSize: 10,-->
<!--        totalPage: 0,-->
<!--        dataListLoading: false,-->
<!--        dataListSelections: [],-->
<!--        addOrUpdateVisible: false-->
<!--      }-->
<!--    },-->
<!--    components: {-->
<!--      AddOrUpdate-->
<!--    },-->
<!--    activated () {-->
<!--      this.getDataList()-->
<!--    },-->
<!--    methods: {-->
<!--      //  奇偶行背景色不同-->
<!--      setCurrent(row) {-->
<!--        this.$refs.singleTable.setCurrentRow(row);-->
<!--      },-->
<!--      handleCurrentChange(val) {-->
<!--        this.currentRow = val;-->
<!--      },-->
<!--      tableRowClassName({row, rowIndex}) {-->
<!--        if ((rowIndex + 1) % 2 === 0) {-->
<!--          return 'success-row';-->
<!--        }-->
<!--        return '';-->
<!--      },-->
<!--      // 获取数据列表-->
<!--      getDataList () {-->
<!--        this.dataListLoading = true-->
<!--        this.$http({-->
<!--          url: this.$http.adornUrl('/tbposition/tbposition/list'),-->
<!--          method: 'get',-->
<!--          params: this.$http.adornParams({-->
<!--            'page': this.pageIndex,-->
<!--            'limit': this.pageSize,-->
<!--            'key': this.dataForm.key-->
<!--          })-->
<!--        }).then(({data}) => {-->
<!--          if (data && data.code === 0) {-->
<!--            this.dataList = data.page.list-->
<!--            this.totalPage = data.page.totalCount-->
<!--          } else {-->
<!--            this.dataList = []-->
<!--            this.totalPage = 0-->
<!--          }-->
<!--          this.dataListLoading = false-->
<!--        })-->
<!--      },-->
<!--      // 每页数-->
<!--      sizeChangeHandle (val) {-->
<!--        this.pageSize = val-->
<!--        this.pageIndex = 1-->
<!--        this.getDataList()-->
<!--      },-->
<!--      // 当前页-->
<!--      currentChangeHandle (val) {-->
<!--        this.pageIndex = val-->
<!--        this.getDataList()-->
<!--      },-->
<!--      // 多选-->
<!--      selectionChangeHandle (val) {-->
<!--        this.dataListSelections = val-->
<!--      },-->
<!--      // 新增 / 修改-->
<!--      addOrUpdateHandle (id) {-->
<!--        this.addOrUpdateVisible = true-->
<!--        this.$nextTick(() => {-->
<!--          this.$refs.addOrUpdate.init(id)-->
<!--        })-->
<!--      },-->
<!--      // 删除-->
<!--      deleteHandle (id) {-->
<!--        var ids = id ? [id] : this.dataListSelections.map(item => {-->
<!--          return item.position-->
<!--        })-->
<!--        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {-->
<!--          confirmButtonText: '确定',-->
<!--          cancelButtonText: '取消',-->
<!--          type: 'warning'-->
<!--        }).then(() => {-->
<!--          this.$http({-->
<!--            url: this.$http.adornUrl('/tbposition/tbposition/delete'),-->
<!--            method: 'post',-->
<!--            data: this.$http.adornData(ids, false)-->
<!--          }).then(({data}) => {-->
<!--            if (data && data.code === 0) {-->
<!--              this.$message({-->
<!--                message: '操作成功',-->
<!--                type: 'success',-->
<!--                duration: 1500,-->
<!--                onClose: () => {-->
<!--                  this.getDataList()-->
<!--                }-->
<!--              })-->
<!--            } else {-->
<!--              this.$message.error(data.msg)-->
<!--            }-->
<!--          })-->
<!--        })-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</script>-->
<!--<style lang="scss">-->
<!--.tr-color-0 {-->
<!--  background: #f0f0f0;-->
<!--}-->
<!--.tr-color-1 {-->
<!--  background: #fff;-->
<!--}-->
<!--.el-table .success-row {-->
<!--  background: #DFEAF5;-->
<!--}-->
<!--</style>-->
